<template>
	<view class="collect-information flex-column-start-center">
		<view class="top-title" :style="{ 'margin-top': titleTop + 'rpx' }">
			完善你的资料
		</view>
		<view class="info-box flex-column-start-center">
			<view class="info-input-item flex-row-start-center" v-for="(item, index) in inputDatas" :key="index">
				<view class="input-label">{{ item.label }}</view>
				<view class="input-content" @click="handleInfoItemClick(item)">
					<!-- 无值 -->
					<view class="input-avatar flex-row-center-center" v-if="item.valueType == 'avatar'">+</view>
					<view class="input-placeholder"
						v-if="(item.valueType == 'nick-name' || item.valueType == 'date' || item.valueType == 'mbti') && !item.value">
						{{ item.placeholder }}
					</view>

					<!-- 有值 -->
					<view class="input-tag" v-if="(item.valueType == 'nick-name' || item.valueType == 'date') && item.value">
						{{ item.value }}
					</view>
					<view class="check-input flex-row-start-center" v-if="item.valueType == 'mbti' && item.value">
						<view class="mbti-type flex-row-center-center">
							<image class="mbti-avatar"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/454367ca87f24b8aba1585a9e485ced8.png"
								mode="aspectFill"></image>
							<text class="mbti-label">INFJ</text>
						</view>
					</view>

					<view class="sex-box flex-row-start-center" v-if="item.valueType == 'sex'">
						<view class="sex-item flex-row-center-center"
							:class="{ 'man': actSex === 0 && actSex == citem.value, 'woman': actSex === 1 && actSex == citem.value }"
							v-for="(citem, cindex) in sexs" :key="cindex" @click="handleSexClick(citem.value)">
							<view class="sex-icon"></view>
							<view class="sex-text">
								{{ citem.label }}
							</view>
						</view>

					</view>




				</view>
			</view>

			<!-- 	<view class="info-input-item flex-row-start-center">
				<view class="input-label">昵称</view>
				<view class="input-content">
					<input class="input-tag" type="text" placeholder="设置你的昵称"
						placeholder-style="font-weight: 300;font-size: 30rpx;color: #979797;line-height: 40rpx;" />
				</view>
			</view>

			<view class="info-input-item flex-row-start-center">
				<view class="input-label">性别</view>
				<view class="input-content">
					<view class="sex-box flex-row-start-center">
						<view class="sex-item flex-row-center-center"
							:class="{'man':actSex===0&&actSex==citem.value,'woman':actSex===1&&actSex==citem.value}"
							v-for="(citem,cindex) in sexs" :key="cindex" @click="handleSexClick(citem.value)">
							<view class="sex-icon"></view>
							<view class="sex-text">
								{{citem.label}}
							</view>
						</view>

					</view>
				</view>
			</view>

			<view class="info-input-item flex-row-start-center">
				<view class="input-label">生日</view>
				<view class="input-content" @click="handleOpenPop">
					<view class="check-input">
						选择你的生日
					</view>
				</view>
			</view>

			<view class="info-input-item flex-row-start-center">
				<view class="input-label">MBTI</view>
				<view class="input-content">
					<view class="check-input flex-row-start-center">
						<text>选择你的MBTI</text>
									<view class="mbti-type flex-row-center-center">
							<image class="mbti-avatar"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/454367ca87f24b8aba1585a9e485ced8.png"
								mode="aspectFill"></image>
							<text class="mbti-label">INFJ</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="bottom-btn flex-row-center-center">
			<view class="btn-content flex-row-center-center" :class="{ 'btn-cansubmit': canSubmit }">保存</view>
		</view>

		<mbtiPop ref="mbtiPop" @confirmValue="handlePopConfirm" :inputAlignRight="true"></mbtiPop>

	</view>
</template>

<script>
import mbtiPop from "@/components/m-mbti/mbti-pop.vue"
export default {
	components: {
		mbtiPop
	},
	data() {
		return {
			screenWidth: 375,
			titleTop: 0,
			canSubmit: true,
			sexs: [{
				label: "男",
				value: 0
			},
			{
				label: "女",
				value: 1
			},
			],
			actSex: -1,
			inputDatas: [{
				type: "label-in",
				label: "头像",
				value: "",
				limit: -1,
				valueType: "avatar",
				code: "headUrl",
				isRequire: true
			},
			{
				type: "label-in",
				label: "昵称",
				value: "",
				limit: -1,
				valueType: "nick-name",
				placeholder: "设置你的昵称",
				code: "username",
				isRequire: true
			},
			{
				type: "label-in",
				label: "性别",
				tip: "选择你的性别",
				value: "",
				code: "sex",
				valueType: "sex",
				limit: -1,
				isRequire: true
			},
			{
				type: "label-in",
				label: "生日",
				tip: "选择你的生日",
				value: "",
				code: "birthday",
				valueType: "date",
				limit: -1,
				isRequire: true,
				placeholder: "选择你的生日",
			},

			{
				type: "label-in",
				label: "MBTI",
				tip: "选择你的MBTI",
				value: "",
				code: "mbti",
				valueType: "mbti",
				limit: -1,
				isRequire: true,
				placeholder: "选择你的MBTI",
			},
			]
		};
	},
	created() {
		try {
			let screenWidth = uni.getStorageSync('screenWidth')
			if (screenWidth) {
				this.screenWidth = screenWidth
			} else {
				this.screenWidth = uni.getSystemInfoSync().screenWidth; // 当前设备屏幕宽度
				uni.setStorageSync("screenWidth", this.screenWidth)
			}
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let {
				top,
				height
			} = menuButtonInfo

			this.titleTop = this.pxToRpx(height + top) + 94
		} catch (error) {
			//TODO handle the exception
		}
	},
	methods: {
		pxToRpx(px) {
			const designWidth = 750; // 设计稿宽度
			const rpx = (designWidth / this.screenWidth) * px; // 根据屏幕宽度计算 rpx
			return rpx;
		},
		handleSexClick(value) {
			this.actSex = value
		},
		handlePopConfirm(e) {
			// 弹修改成功？要不要做对比？
			let arr = [...e.data]
			console.log("宝宝", arr)

			// console.log("返回的是", this.formData);
		},
		handleInfoItemClick(item) {
			console.log('宝宝', item)
		},
		handleOpenPop(data) {
			let inputData = [{
				...data
			}]
			this.$refs.mbtiPop.open({
				data: inputData,
				title: "你的资料",
			})
		}
	}
}
</script>

<style lang="scss">
.collect-information {
	position: absolute;
	left: 0rpx;
	top: 0rpx;
	width: 100%;
	height: 100%;
	background-color: #ededed;
	box-sizing: border-box;
	background-color: pink;
	padding: 0px 48rpx;
	overflow: hidden;

	.top-title {
		width: 100%;
		height: 72rpx;
		font-family: MiSans;
		font-weight: 400;
		font-size: 54rpx;
		color: #272F5F;
		line-height: 72rpx;
		margin-bottom: 120rpx;
	}

	.info-box {
		width: 100%;
		gap: 48rpx;
		box-sizing: border-box;
		margin-bottom: 240rpx;

		.info-input-item {
			width: 100%;

			.input-label {
				height: 40rpx;
				font-family: MiSans;
				font-weight: 300;
				font-size: 30rpx;
				color: #272F5F;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				margin-right: 22rpx;
			}

			.input-content {
				flex: 1;

				.input-avatar {
					width: 132rpx;
					height: 132rpx;
					background: rgba(242, 242, 242, 0.6);
					border-radius: 12rpx;
				}



				.input-tag,
				.check-input,
				.input-placeholder {
					flex: 1;
					background: rgba(242, 242, 242, 0.6);
					border-radius: 12rpx;
					padding: 22rpx 28rpx;

					font-family: MiSans;
					font-weight: 500;
					font-size: 30rpx;
					color: #272F5F;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}

				.check-input {
					color: #979797;

					.mbti-type {
						width: 100%;
						gap: 18rpx;

						.mbti-avatar {
							width: 48rpx;
							height: 48rpx;
						}

						.mbti-label {
							flex: 1;
							height: 40rpx;
							font-family: MiSans;
							font-weight: 500;
							font-size: 30rpx;
							color: #272F5F;
							line-height: 40rpx;

						}

					}
				}

				.input-placeholder {
					font-weight: 300;
					font-size: 30rpx;
					color: #979797;
					line-height: 40rpx;
				}

				.sex-box {
					width: 100%;
					height: 84rpx;
					gap: 34rpx;

					.sex-item {
						flex: 1;
						height: 100%;
						background: rgba(242, 242, 242, 0.6);
						border-radius: 12rpx;
						border: 2rpx solid transparent;


						.sex-text {
							height: 40rpx;
							font-family: MiSans;
							font-weight: 300;
							font-size: 30rpx;
							color: #494949;
							line-height: 40rpx;
						}

						.sex-icon {
							width: 48rpx;
							height: 48rpx;
							margin-right: 18rpx;
							background-color: #fff;
						}
					}

					.man {
						border-color: #0183FA;
					}

					.woman {
						border-color: #FF3B6E;
					}
				}
			}
		}
	}


	.bottom-btn {
		width: 100%;
		padding: 0rpx 70rpx;

		.btn-content {
			flex: 1;
			height: 86rpx;
			background: #FFFFFF;
			border-radius: 46rpx;

			font-family: MiSans;
			font-weight: 400;
			font-size: 34rpx;
			color: #979797;
			line-height: 86rpx;
		}

		.btn-cansubmit {
			background: linear-gradient(135deg, #FE85EB 0%, #616CFF 100%);
			color: #FFFFFF;
		}



	}
}
</style>